<template>
	<view class="tuangou">
		<view class="headtop">
			<image src="../../../static/images/index_bj.png" class="bj"></image>
			<view class="headtitile">
				<image src="../../../static/images/left.png" @click="fanhui"></image>
				<text>AI获取</text>
			</view>
			<view class="top clearfix">
				<view class="left fl clearfix" @click="nearsx">
					<view :class="['name fl', nearstatus === true?'names':'']">{{nearname}}</view>
					<image src="../../../static/images/xiala.png" class="fl" v-if="nearstatus == false"></image>
					<image src="../../../static/images/shangla.png" class="fl" v-else></image>
				</view>
				<view class="left fl clearfix" @click="categorysx">
					<view :class="['name fl', categorystatus === true?'names':'']">{{categoryname}}</view>
					<image src="../../../static/images/xiala.png" class="fl" v-if="categorystatus == false"></image>
					<image src="../../../static/images/shangla.png" class="fl" v-else></image>
				</view>
				<view class="left fl clearfix" @click="categorysansx">
					<view :class="['name fl', categorysanstatus === true?'names':'']">{{categorysanname}}</view>
					<image src="../../../static/images/xiala.png" class="fl" v-if="categorysanstatus == false"></image>
					<image src="../../../static/images/shangla.png" class="fl" v-else></image>
				</view>
				<view class="right fr clearfix" @click="shaixuansx">
					<view :class="['name fl', shaixuanstatus === true?'names':'']">筛选</view>
					<image src="../../../static/images/shaixuanx.png" class="fl" v-if="shaixuanstatus == false"></image>
					<image src="../../../static/images/shaixuans.png" class="fl" v-else></image>
				</view>
			</view>
		</view>
		<view class="beijing" v-if="nearbeijing"></view>
		<view class="neartk" v-if="nearstatus">
			<view class="titles">当前位置</view>
			<view class="li">
				<text :class="[formData.distance === -2?'active':'']" @click="nearclick(-2,'全城')">全城</text>
				<text :class="[formData.distance === -1?'active':'']" @click="nearclick(-1,'500m')">500m</text>
				<text :class="[formData.distance === 1?'active':'']" @click="nearclick(1,'1km')">1km</text>
				<text :class="[formData.distance === 3?'active':'']" @click="nearclick(3,'3km')">3km</text>
				<text :class="[formData.distance === 5?'active':'']" @click="nearclick(5,'5km')">5km</text>
			</view>
		</view>
		<view class="beijing" v-if="categorybeijing"></view>
		<view class="categorytk" v-if="categorystatus">
			<view class="left">
				<text v-for="(item,index) in categoryF" :key="index" :class="[categoryF_id === item.category_id?'active':'']" @click="getFenlei(item.category_id)">{{item.name}}</text>
			</view>
			<view class="right">
				<view class="right1">
					<text v-for="(item,index) in categoryS" :key="index" :class="[categoryS_id === item.category_id?'active':'']" @click="getFenleiT(item.category_id,item.name)">{{item.name}}</text>
				</view>
			</view>
		</view>
		<view class="beijing" v-if="categorysanbeijing"></view>
		<view class="categorysantk" v-if="categorysanstatus">
			<view class="left">
				<text v-for="(item,index) in categoryT" :key="index" :class="[categoryT_id === item.category_id?'active':'']" @click="getSan(item.category_id,item.name)">{{item.name}}</text>
			</view>
		</view>
		<view class="beijing" v-if="shaixuanbeijing"></view>
		<view class="shaixuantk" v-if="shaixuanstatus">
			<view class="titles">人均价格</view>
			<view class="li">
				<text :class="[formData.newConsumptionType === 0?'active':'']" @click="formData.newConsumptionType = 0">不限</text>
				<text :class="[formData.newConsumptionType === 1?'active':'']" @click="formData.newConsumptionType = 1">50以下</text>
				<text :class="[formData.newConsumptionType === 2?'active':'']" @click="formData.newConsumptionType = 2">50-100</text>
				<text :class="[formData.newConsumptionType === 3?'active':'']" @click="formData.newConsumptionType = 3">100-300</text>
				<text :class="[formData.newConsumptionType === 4?'active':'']" @click="formData.newConsumptionType = 4">300以上</text>
			</view>
			<view class="titles">优先展示</view>
			<view class="li">
				<text :class="[formData.sourceType === 0?'active':'']" @click="formData.sourceType = 0">距离优先</text>
				<text :class="[formData.sourceType === 2?'active':'']" @click="formData.sourceType = 2">开发数量优先</text>
			</view>
			<view class="queren" @click="queren">确认</view>
		</view>
		<view class="container">
			<view class="bottomcontent">
				<view class="nr clearfix" v-for="(item,index) in list" :key="index" @click="detail(index)">
					<image :src="item.coverUrl" class="fl"></image>
					<view class="right fl">
						<view class="title">{{item.name}}</view>
						<view class="desc">
							<text>{{item.categoryName}}</text>
							<text>{{item.address}}</text>
							<text>人均¥{{item.consumePrice}}</text>
						</view>
						<view class="bottom">
							<view class="name">点击更新进行开发客户</view>
						</view>
					</view>
					<view class="juli">{{item.distance}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		request
	} from '@/api/request';
	
	export default {
		data() {
			return {
				nearname: '附近',
				nearbeijing: false,
				nearstatus: false,
				categoryname: '全部美食',
				categorybeijing: false,
				categorystatus: false,
				shaixuanbeijing: false,
				shaixuanstatus: false,
				categorysanname: '全部',
				categorysanbeijing: false,
				categorysanstatus: false,
				list: [],
				formData: {
					distance: -2,
					newConsumptionType: 0,
					sourceType: 0,
					categoryId: '1612403856638021633',
					user_id: '',
					team_id: '',
					pageNo: 1
				},
				userData: [],
				categoryF_id: '',
				categoryF: [],
				categoryS_id: '',
				categoryS: [],
				categoryT_id: '',
				categoryT: [],
			}
		},
		onLoad() {
			// 用户基本信息
			request({
				url: '/api/user/profile',
				method: 'GET',
				data: {},
				header: {
					'xx-token': uni.getStorageSync('token')
				}
			}).then((response) => {
				this.userData = response.data;
			
				this.getList(1);
			}).catch((error) => {});
			
			// 获取一级分类
			uni.request({
				url: 'http://39.106.73.165:6605/api/category_list_one',
				data: {},
				method: 'POST',
				success: (res) => {
					if (res.data.code == 200) {
						this.categoryF = res.data.result;
						this.categoryF_id = res.data.result[0].category_id;
						
						// 二级分类
						this.getFenlei(res.data.result[0].category_id)
					}
				},
				fail(error) {
					uni.showToast({
						title: error,
						icon: 'none'
					})
				}
			})
		},
		onReachBottom() {
			this.formData.pageNo++;
			this.getList(this.formData.pageNo)
		},
		methods: {
			// 点击详情
			detail(index){
				let json = this.list[index];
				
				uni.setStorage({
					key: 'json',
					data: json
				})
				
				uni.navigateTo({
					url: '/pages/home/second/grab_detail'
				})
			},
			// 二级分类
			getFenlei(category_id){
				this.categoryF_id = category_id;
				
				this.categoryS = [];
				uni.request({
					url: 'http://39.106.73.165:6605/api/category_list_other',
					data: {
						parentId: category_id,
						categoryLevel: 1,
					},
					method: 'POST',
					success: (res) => {
						if (res.data.code == 200) {
							this.categoryS = res.data.result;
							this.categoryS_id = res.data.result[0].category_id;
							this.categoryname = res.data.result[0].name;
							
							this.categorysanname = '全部';
						}
					},
					fail(error) {
						uni.showToast({
							title: error,
							icon: 'none'
						})
					}
				})
			},
			// 三级分类
			getFenleiT(category_id,name){
				this.categoryS_id = category_id;
				this.categoryname = name;
				this.categorysanname = '全部';
				
				// 请求数据
				this.list = [];
				this.formData.categoryId = this.categoryS_id;
				this.getList(1);
				
				this.categoryT = [];
				uni.request({
					url: 'http://39.106.73.165:6605/api/category_list_other',
					data: {
						parentId: category_id,
						categoryLevel: 2,
					},
					method: 'POST',
					success: (res) => {
						if (res.data.code == 200) {
							this.categoryT = res.data.result;
							this.categoryT_id = res.data.result[0].category_id;
						}
					},
					fail(error) {
						uni.showToast({
							title: error,
							icon: 'none'
						})
					}
				})
			},
			// 点击三级分类
			getSan(category_id,name){
				this.categorysanname = name;
				
				// 请求数据
				this.list = [];
				this.formData.categoryId = category_id;
				this.getList(1);
			},
			getList(page){
				let that = this;
				
				// 隐藏所有弹框
				this.categorystatus = false;
				this.categorybeijing = false;
				this.shaixuanbeijing = false;
				this.shaixuanstatus = false;
				this.nearbeijing = false;
				this.nearstatus = false;
				this.categorysanbeijing = false;
				this.categorysanstatus = false;
				
				uni.showLoading({
					title: '加载中'
				})
								
				uni.request({
					url: 'http://39.106.73.165:6605/api/business_list',
					data: {
						user_id: that.userData.id,
						team_id: that.userData.team_id,
						categoryId: that.formData.categoryId,
						distance: that.formData.distance,
						newConsumptionType: that.formData.newConsumptionType,
						pageNo: page,
						sourceType: that.formData.sourceType
					},
					method: 'POST',
					success: (res) => {
						if (res.data.code == 200) {
							uni.hideLoading()
							let list = res.data.result.result.records;
							if(list){
								for (let i = 0; i < list.length; i++) {
									let arr = list[i].categoryName.split(';')
									list[i].categoryName = arr[arr.length - 1];
									
									if (list[i].distance >= 1000) {
										list[i].distance = (list[i].distance / 1000).toFixed(2) + 'km'
									} else {
										list[i].distance = list[i].distance + 'm'
									}
									
									this.list.push(list[i]);
								}
							}else{
								uni.showToast({
									title: '到底啦',
									icon: 'none'
								})
							}
						}
					},
					fail(error) {
						uni.showToast({
							title: error,
							icon: 'none'
						})
					}
				})
			},
			// 确认筛选条件
			queren(){
				this.nearstatus = false;
				this.nearbeijing = false;
				
				this.categorystatus = false;
				this.categorybeijing = false;
				
				this.categorysanbeijing = false;
				this.categorysanstatus = false;
				
				this.shaixuanbeijing = !this.shaixuanbeijing;
				this.shaixuanstatus = !this.shaixuanstatus;
				
				this.list = [];
				this.getList(1);
			},
			// 附近筛选
			nearsx() {
				this.categorystatus = false;
				this.categorybeijing = false;

				this.shaixuanbeijing = false;
				this.shaixuanstatus = false;
				
				this.categorysanbeijing = false;
				this.categorysanstatus = false;

				this.nearstatus = !this.nearstatus;
				this.nearbeijing = !this.nearbeijing;
			},
			// 附近点击
			nearclick(index,name){
				this.categorystatus = false;
				this.categorybeijing = false;
				
				this.shaixuanbeijing = false;
				this.shaixuanstatus = false;
				
				this.categorysanbeijing = false;
				this.categorysanstatus = false;
				
				this.nearstatus = !this.nearstatus;
				this.nearbeijing = !this.nearbeijing;
				
				this.list = [];
				this.nearname = name;
				this.formData.distance = index;
				this.getList(1);
			},
			// 分类筛选
			categorysx() {
				this.nearstatus = false;
				this.nearbeijing = false;

				this.shaixuanbeijing = false;
				this.shaixuanstatus = false;
				
				this.categorysanbeijing = false;
				this.categorysanstatus = false;

				this.categorystatus = !this.categorystatus;
				this.categorybeijing = !this.categorybeijing;
			},
			// 三级分类筛选
			categorysansx(){
				this.nearstatus = false;
				this.nearbeijing = false;
				
				this.shaixuanbeijing = false;
				this.shaixuanstatus = false;
				
				this.categorybeijing = false;
				this.categorystatus = false;
				
				this.categorysanstatus = !this.categorysanstatus;
				this.categorysanbeijing = !this.categorysanbeijing;
			},
			// 筛选
			shaixuansx() {
				this.nearstatus = false;
				this.nearbeijing = false;

				this.categorystatus = false;
				this.categorybeijing = false;
				
				this.categorysanbeijing = false;
				this.categorysanstatus = false;

				this.shaixuanbeijing = !this.shaixuanbeijing;
				this.shaixuanstatus = !this.shaixuanstatus;
			},
			fanhui(){
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.tuangou {
		width: 100%;
		margin: 0 auto;

		.headtop {
			width: 100%;
			margin: 0 auto;
			position: relative;
			height: 200rpx;
			z-index: 200;

			.bj {
				width: 100%;
				height: 286rpx;
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
			}

			.headtitile {
				width: 94%;
				margin: 0 auto;
				position: absolute;
				top: 94rpx;
				left: 3%;
				
				image {
					width: 17rpx;
					height: 30rpx;
					float: left;
					margin-right: 18rpx;
				}
				
				text {
					height: 30rpx;
					line-height: 30rpx;
					font-size: 30rpx;
					color: #FFFFFF;
					float: left;
				}
			}

			.top {
				width: 94%;
				margin: 0 auto;
				position: absolute;
				left: 3%;
				top: 150rpx;
				padding: 0 1rpx;


				.left {
					height: 30rpx;
					line-height: 30rpx;
					margin-right: 30rpx;

					.name {
						font-size: 24rpx;
						color: #FFFFFF;
						margin-right: 8rpx;
					}

					.names {
						color: #ECDEA4;
					}

					image {
						width: 22rpx;
						height: 12rpx;
						margin-top: 10rpx;
					}
				}

				.right {
					height: 30rpx;
					line-height: 30rpx;

					.name {
						font-size: 24rpx;
						color: #FFFFFF;
						margin-right: 8rpx;
					}

					.names {
						color: #ECDEA4;
					}

					image {
						width: 22rpx;
						height: 26rpx;
						margin-top: 2rpx;
					}
				}
			}
		}
		
		.container {
			width: 94%;
			margin: 0 auto;
		
			.bottomcontent {
				margin-top: 20rpx;
				padding-bottom: 120rpx;
		
				.nr {
					width: 100%;
					margin: 0 auto;
					padding: 20rpx;
					box-sizing: border-box;
					background: #242831;
					border-radius: 10rpx;
					position: relative;
					margin-bottom: 18rpx;
		
					image {
						width: 150rpx;
						height: 150rpx;
						margin-right: 20rpx;
						border: 1rpx solid #E8BD70;
						border-radius: 10rpx;
					}
		
					.right {
						width: 60%;
		
						.title {
							font-size: 28rpx;
							color: #FFFFFF;
							font-weight: 700;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
		
						.desc {
							margin-top: 10rpx;
							margin-bottom: 16rpx;
		
							text {
								font-size: 24rpx;
								color: #FFFFFF;
								margin-right: 20rpx;
							}
						}
		
						.bottom {
							text-align: center;
							padding: 4rpx 16rpx;
							background: linear-gradient(to right, #fff9ce, #e4b985);
							border-radius: 6rpx;
							display: inline-block;
		
							.name {
								font-size: 24rpx;
								color: #8A5A44;
		
								text:nth-of-type(1) {
									// color: #8F3005;
									color: #FF0013;
									font-weight: 700;
								}
		
								text:nth-of-type(2) {
									color: #FF0013;
									font-weight: 700;
								}
							}
						}
					}
		
					.juli {
						position: absolute;
						top: 76rpx;
						right: 20rpx;
						color: #FFFFFF;
						font-weight: 700;
						font-size: 24rpx;
					}
				}
			}
		}

		.beijing {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			height: 100vh;
			background: #000;
			z-index: 100;
			opacity: 0.5;
		}

		.neartk {
			width: 100%;
			position: absolute;
			top: 200rpx;
			left: 0;
			background: #191D26;
			border-bottom-left-radius: 30rpx;
			border-bottom-right-radius: 30rpx;
			z-index: 210;
			box-shadow: 0rpx 5rpx 6rpx 0rpx rgba(236, 222, 164, 0.1), 0rpx 1rpx 0rpx 0rpx #4D4D4D;
			padding-bottom: 40rpx;

			.titles {
				width: 94%;
				margin: 0 auto;
				font-size: 26rpx;
				color: #FFFFFF;
				padding-top: 20rpx;
			}

			.li {
				width: 94%;
				margin: 0 auto;
				margin-top: 30rpx;

				text {
					display: inline-block;
					width: 114rpx;
					height: 62rpx;
					text-align: center;
					line-height: 62rpx;
					border-radius: 4rpx;
					background: #242831;
					margin-right: 20rpx;
					color: #FFFFFF;
					font-size: 24rpx;
				}

				.active {
					background: linear-gradient(270deg, #EAC59F, #E4B985, #FFF9CE);
					color: #806B1A;
				}
			}
		}

		.categorytk {
			width: 100%;
			position: absolute;
			top: 200rpx;
			left: 0;
			background: #191D26;
			border-bottom-left-radius: 30rpx;
			border-bottom-right-radius: 30rpx;
			z-index: 210;
			box-shadow: 0rpx 5rpx 6rpx 0rpx rgba(236, 222, 164, 0.1), 0rpx 1rpx 0rpx 0rpx #4D4D4D;
			padding: 0 20rpx 40rpx;
			height: 560rpx;
			box-sizing: border-box;

			.left {
				width: 30%;
				height: 524rpx;
				overflow-y: scroll;
				float: left;

				text {
					display: block;
					width: 100%;
					text-align: center;
					color: #FFFFFF;
					font-size: 24rpx;
					line-height: 60rpx;
				}

				.active {
					color: #ECDEA4;
					background: #242831;
					border-top-left-radius: 10rpx;
					border-bottom-left-radius: 10rpx;
				}
			}

			.right {
				width: 70%;
				float: left;
				background: #242831;
				padding: 0 40rpx;
				box-sizing: border-box;
				border-radius: 10rpx;
				
				.right1{
					width: 100%;
					float: left;
					height: 524rpx;
					overflow-y: scroll;
					
					text {
						display: block;
						width: 100%;
						color: #FFFFFF;
						font-size: 24rpx;
						line-height: 60rpx;
					}
					
					.active {
						color: #ECDEA4;
					}
				}
			}
		}
		
		.categorysantk{
			width: 100%;
			position: absolute;
			top: 200rpx;
			left: 0;
			background: #191D26;
			border-bottom-left-radius: 30rpx;
			border-bottom-right-radius: 30rpx;
			z-index: 210;
			box-shadow: 0rpx 5rpx 6rpx 0rpx rgba(236, 222, 164, 0.1), 0rpx 1rpx 0rpx 0rpx #4D4D4D;
			padding: 0 20rpx 40rpx;
			height: 560rpx;
			box-sizing: border-box;
			
			.left {
				width: 100%;
				height: 524rpx;
				overflow-y: scroll;
				float: left;
			
				text {
					display: block;
					width: 100%;
					text-align: center;
					color: #FFFFFF;
					font-size: 24rpx;
					line-height: 60rpx;
				}
			
				.active {
					color: #ECDEA4;
					background: #242831;
					border-top-left-radius: 10rpx;
					border-bottom-left-radius: 10rpx;
				}
			}
			
			.right {
				width: 70%;
				float: left;
				background: #242831;
				padding: 0 40rpx;
				box-sizing: border-box;
				border-radius: 10rpx;
				
				.right1{
					width: 100%;
					float: left;
					height: 524rpx;
					overflow-y: scroll;
					
					text {
						display: block;
						width: 100%;
						color: #FFFFFF;
						font-size: 24rpx;
						line-height: 60rpx;
					}
					
					.active {
						color: #ECDEA4;
					}
				}
			}
		}

		.shaixuantk {
			width: 100%;
			position: absolute;
			top: 200rpx;
			left: 0;
			background: #191D26;
			border-bottom-left-radius: 30rpx;
			border-bottom-right-radius: 30rpx;
			z-index: 210;
			box-shadow: 0rpx 5rpx 6rpx 0rpx rgba(236, 222, 164, 0.1), 0rpx 1rpx 0rpx 0rpx #4D4D4D;
			padding-bottom: 20rpx;

			.titles {
				width: 94%;
				margin: 0 auto;
				font-size: 26rpx;
				color: #FFFFFF;
				padding-top: 20rpx;
			}

			.li {
				width: 94%;
				margin: 0 auto;
				margin-top: 30rpx;
				margin-bottom: 20rpx;

				text {
					display: inline-block;
					padding: 0 20rpx;
					height: 62rpx;
					text-align: center;
					line-height: 62rpx;
					border-radius: 4rpx;
					background: #242831;
					margin-right: 20rpx;
					color: #FFFFFF;
					font-size: 24rpx;
				}

				.active {
					background: linear-gradient(270deg, #EAC59F, #E4B985, #FFF9CE);
					color: #806B1A;
				}
			}

			.queren {
				width: 90rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				background: #242831;
				border-radius: 5rpx;
				border: 1rpx solid #ECDEA4;
				font-size: 20rpx;
				color: #ECDEA4;
				position: absolute;
				top: 20rpx;
				right: 3%;
			}
		}
	}
</style>